<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .small {
            width: 400px;
            height: 400px;
            position: relative;
            border: 4px solid #ddd;
            box-shadow: 0 0 5px rgba(0, 0, 0, .5);
        }

        .container {
            width: 400px;
            height: 400px;
            position: relative;
            margin-left: 200px;
            margin-top: 100px;
        }

        .small img {
            width: 100%;
            height: 100%;
        }

        .small .wrap {
            width: 100%;
            height: 100%;
            position: absolute;
            z-index: 999;
        }

        .small .grayBox {
            display: none;
            width: 100px;
            height: 100px;
            background-size: 400px 400px;
            background-position: 0 0;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
            position: absolute;
            left: 0;
            top: 0;
        }

        .big {
            width: 400px;
            height: 400px;
            position: absolute;
            left: 700px;
            top: 100px;
            border: 1px solid #f10;
            display: none;
            overflow: hidden;
        }

        .big img {
            position: absolute;
            width: 1600px;
            height: 1600px;

        }

        .choice-btn {
            position: absolute;
            bottom: -112px;
            width: 100%;
        }

        .choice-btn img {
            width: 100px;
            height: 100px;
            border: 2px solid #fff;
        }

        .choice-btn img:hover {
            border-color: #000;
        }
    </style>
</head>

<body>
    <!-- 左侧放大镜容器 -->
    <div class="container">
        <div class="small">
            <!-- 贴膜 -->
            <div class="wrap"></div>
            <!-- 左侧放大镜图片 -->
            <img src="images/timg.jpg" alt="">
            <!-- 小盒子 -->
            <span class="grayBox"></span>
        </div>
        <div class="choice-btn">
            <img src="images/timg.jpg" alt="">
            <img src="https://img.zcool.cn/community/01f9d55efda3d5a8012066216f132c.jpg@260w_195h_1c_1e_1o_100sh.jpg"
                alt="">
        </div>

    </div>

    <!-- 大图容器 -->
    <div class="big">
        <!-- 大图图片 -->
        <img src="images/timg.jpg" alt="">
    </div>
</body>

</html>
<script>
    function Mangeifier() {
        //镜子
        this.square = document.querySelector(".grayBox")
        //小盒子的容器
        this.small = document.querySelector(".small")
        //小盒子里的图片
        this.small_img = document.querySelector(".small img")
        //大盒子的容器
        this.big = document.querySelector(".big")
        //大盒子里的照片
        this.big_img = document.querySelector(".big img")
        //设置index
        this.index = 0
        //按钮里的图片
        this.btns = document.querySelectorAll(".choice-btn img")
        //镜子的大小
        this.square_size = {
            width: parseInt(getComputedStyle(this.square).width),
            height: parseInt(getComputedStyle(this.square).height)
        }
        //小盒子的大小
        this.small_size = {
            width: parseInt(getComputedStyle(this.small).width),
            height: parseInt(getComputedStyle(this.small).height)
        }
        //大盒子的大小
        this.big_size = {
            width: parseInt(getComputedStyle(this.big).width),
            height: parseInt(getComputedStyle(this.big).height)
        }
        //大盒子里图片的 大小
        this.big_img_size = {
            width: parseInt(getComputedStyle(this.big_img).width),
            height: parseInt(getComputedStyle(this.big_img).height)
        }
        //绑定事件
        this.bindEvent()
    }
    Mangeifier.prototype.bindEvent = function () {
        var self = this
        //鼠标放上去镜子显示，离开隐藏
        this.small.onmouseover = function () {
            self.square.style.display = "block"
            self.big.style.display = "block"
        }
        this.small.onmouseout = function () {
            self.square.style.display = "none"
            self.big.style.display = "none"
        }
        this.small.onmousemove = function (e) {
            var e = e || event
            var x = e.offsetX - 50
            var y = e.offsetY - 50
            var max_left = self.small.offsetWidth - self.square.offsetWidth - 8
            var max_top = self.small.offsetHeight - self.square.offsetHeight - 8
            //边界判断
            if (x < 0) {
                x = 0
            }
            if (x > max_left) {
                x = max_left
            }
            if (y < 0) {
                y = 0
            }
            if (y > max_top) {
                y = max_top
            }
            //数据显示
            self.square.style.left = x + "px"
            self.square.style.top = y + "px"
            //获得位移的百分比
            var pa_left = (x / max_left).toFixed(2)
            var pa_top = (y / max_top).toFixed(2)
            //大盒子的最大左边位移
            var big_left = self.big_img_size.width - self.big_size.width
            var big_top = self.big_img_size.width - self.big_size.width
            //大盒子的位置
            self.big_img.style.left = -big_left * pa_left + "px"
            self.big_img.style.top = -big_top * pa_top + "px"
        }
        for(var i=0;i<self.btns.length;i++){
            // console.log(22);
            self.btns[i].index=i
            console.log(self.btns[i]);
            self.btns[i].onmouseover=function(){
                self.index=this.index
                //小盒子里边的图片
                self.small_img.src=this.src
                console.log(this.src);

                //大盒子里边的图片
                self.big_img.src=this.src
            }
        }
    }
    new Mangeifier()
</script>